<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  data() {
    return {
      msg: 'Hello'
    }
  },

  /**
   * 组合式API的入口
   *    执行时机: beforeCreate 之前
   *    执行次数：一个生命周期内只会触发一次
   *    没有this：undefined
   *    选项式可以通过 this 访问到 setup() 中返回的内容，反过来不行
   */
  setup() {
    console.log('setup', this) // undefined

    // 创建响应式数据
    const count = ref(10)

    console.log('count', count)

    // 定义方法
    const increment = () => {
      console.log('increment')

      count.value++
    }

    // 返回一个对象，将数据或方法给到组件模板或其他选项式API中使用
    return {
      count: count,
      // count: count.value,   这种写法是不对的，会丢失响应式，也就是模板中使用的 count 与 当前 ref 创建的count 没有关联了
      increment
    }
  },

  mounted() {
    // 选项式API中可以通过 this 访问到 setup() 中的返回值, 且针对 ref 数据无需点value

    console.log('mounted', this.count) // 10
    console.log('increment', this.increment) // fn
  }
}
</script>
